<template>
    <div class="main">
        <el-table
                :data="userList"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="用户名">
                            <span v-if="props.row.username!=null">{{ props.row.username }}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <span v-if="props.row.nickname!=null">{{ props.row.nickname }}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <span v-if="props.row.email=null">{{ props.row.email }}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="性别">
                           <span v-if="props.row.gender=null">{{ props.row.gender}}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="生日">
                            
                             <span v-if="props.row.birthday=null">{{ props.row.birthday}}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="个人简介">
                            <span v-if="props.row.info=null">{{ props.row.info}}</span>
                            <span v-else v-text="content"></span>
                        </el-form-item>
                        <el-form-item label="更新时间">
                            <span>{{ props.row.updateAt }}</span>
                        </el-form-item>
                        <el-form-item label="用户头像 URL">
                            <a target="_blank" :href="props.row.avatar">{{ props.row.avatar }}</a>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户 ID"
                    width="430"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="200"
                    prop="username">
            </el-table-column>
            <el-table-column
                    label="昵称"
                    width="200"
                    prop="nickname">
            </el-table-column>
            <el-table-column
                    label="注册时间"
                    prop="createAt">
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    import {FindAllUser, UpdateUser} from "@/api/user";

    export default {


        data() {
            return {
                userList: [],
                content:"空"
            }
        },

        mounted() {
            FindAllUser().then(res => {
                this.userList = res.data
            })
        },
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    span{
        color: rgb(178, 194, 173);
        font-size: 15px;
        font-display: initial;
    }
</style>